<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex</title>
	<style>
		.box {
			background-color: skyblue;
		}

		.box > div {
			z-index: 1;
		}

		.box > div > img {
			position: relative;
			z-index: -1;
		}
	</style>
</head>
<body>
<!--
	注意： .box设置了display:flex之后，图片上来了。 .box设置了层叠上下文
	原因是： .box的子元素 .box>div 不是z-index:auto 所以.box被动的成为了层叠上下文
-->
<button onclick="setDisplay()">为.box设置display:flex</button>
<div class="box">
	<div><img src="../../image/星空.jpg"></div>
</div>
<script>
	function setDisplay() {
		document.getElementsByClassName('box')[0].style.display = 'flex'
	}
</script>
</body>
</html>